<template>
  <view>
    <div class="item-container">
      <div class="item" v-for="item in data[1]" :key="item.id">
        <div class="top">
          <image src="/static/logo.png" class="user-awatar"></image>
          <div>
            <div class="username">{{item.nickName}}</div>
            <div class="usertel">{{item.phone}}</div>
          </div>
        </div>
        <div class="down" v-if="type === 'device'">
          <div>
            <text class="title">收入</text>
            <text class="value">￥{{item.totalMoney}}</text>
          </div>
          <div>
            <text class="title">时长(时)</text>
            <text class="value">{{item.offlineTime}}</text>
          </div>
          <div>
            <text class="title">月份</text>
            <text class="value">{{item.month}}</text>
          </div>
        </div>
        <div class="down" v-else>
          <div>
            <text class="title">收益时间</text>
            <text class="value">2023-04-32 13:21:12</text>
          </div>
          <div>
            <text class="title">收益金额</text>
            <text class="value">139.15</text>
          </div>
          <div>
            <text class="title">我的级别</text>
            <text class="value">工作室 V1</text>
          </div>
          <div>
            <text class="title">管理员账号</text>
            <text class="value">12345678</text>
          </div>
          <div>
            <text class="title">手机号</text>
            <text class="value">186 5006 0808</text>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  name: 'Earnings',
  props: {
    type: {
      type: String,
      required: true
    },
    data: {
      required: true
    }
  }
}
</script>

<style lang="scss">
.item-container {
  background-color: #fff;
  padding: 16px 10px 12px 14px;
  margin-top: 16px;
  .item {
    border: 1px solid #f5f6f7;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .top {
    background-color: #f5f6f7;
    padding: 16px 12px 14px;
    display: flex;
    justify-content: flex-start;
    .user-awatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .username,
    .usertel {
      color: #000;
      line-height: 20px;
      &.username {
        font-size: 14px;
      }
      &.usertel {
        font-size: 12px;
      }
    }
  }
  .down {
    padding: 0 16px 0 16px;
    > div {
      display: flex;
      justify-content: space-between;
      line-height: 32px;
    }
    .title {
      font-size: 12px;
      color: #656565;
    }
    .value {
      color: #000;
      font-size: 12px;
    }
  }
}
</style>
